<template>
  <div class="adminHandle" >
    <h3>公告管理</h3>
    <div class="showMsg">
      <div class="tableList">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="业务功能描述">
                    <span>{{ props.row.funcIntroduce}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="funcName"
              label="业务功能"
              width="800px">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div style="margin: 10px 0px"><el-button type="primary" plain @click="toEdit">添加业务功能</el-button></div>
        <el-input placeholder="请输入业务名称" v-model="addData.noticeTitle" v-show="isEdit"></el-input>
        <el-input placeholder="请输入业务功能页面链接" type="textarea" v-model="addData.notice" v-show="isEdit"></el-input>
        <div style="margin: 10px 0px" v-show="isEdit">
          <el-button type="primary" plain @click="submitAnnounce">业务功能添加</el-button>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
  import axios from 'axios'

  export default {
    name: "HostAnnounce",
    data(){
      return{
        isEdit:false,
        addData:{
          aid:1,
          noticeTitle:'',
          notice:""
        },
        tableData:[
          {
            funcName:'图书馆'
          },
          {
            funcName:'成绩查询'
          },
          {
            funcName:'课程信息查询'
          },
          {
            funcName:'评教系统'
          },
          {
            funcName:'请销假管理'
          },
          {
            funcName:'个人信息管理'
          }
        ],
        tableDataLength:0
      }
    },
    methods: {
      deleteRow(index, rows) {

      },
      toEdit(){
        this.isEdit = true
      },
      submitAnnounce(){
        this.isEdit = false
      }
    },
    watch:{
    },
    mounted(){

    }
  }
</script>


<style scoped>
  .adminHandle{
    width: 100%;
    padding: 5px 10px 0px 10px;
    margin: 20px 100px 0px 100px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

  }
</style>

